<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tinymce content editable false Demo Page</title>
  </head>

  <body>
  <h2>Tinymce content editable false Page</h2>
    <div id="ephox-ui">
      <textarea class="tinymce" rows="15" cols="80" style="width: 80%">
        <p contentEditable="false">[cE=false]</p>
        <div contentEditable="false" style="padding: 20px">
          <div contentEditable="true">dd
            <div contentEditable="false" style="margin: 20px"><div contentEditable="true" style="margin: 20px">[cE=true]</div></div>
            <div contentEditable="false" style="margin: 20px"><div contentEditable="true" style="margin: 20px">[cE=true]</div></div>
          </div>
        </div>
        <p>[cE=true]<span contentEditable="false">[cE=false:1]</span>abc<span contentEditable="false">[cE=false:2]</span><span contentEditable="false">[cE=false:3]</span><span contentEditable="false">[cE=false:4]</span><span contentEditable="false">[cE=false:5]</span></p>
        <p style="line-height: 30px">Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam <a href="#">sed</a> lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit ame<span contentEditable="false">[cE=false]</span>t id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi l<span contentEditable="false">[cE=false:1]</span><span contentEditable="false">[cE=false:2]</span>aoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.</p>
        <p><span contentEditable="false">[cE=false<span contentEditable="true">[cE=true]</span>]</span></p>
        <p contentEditable="false">[cE=false]</p>
        <p contentEditable="false">[cE=false]</p>
        <div contentEditable="false" style="width: 100px; height: 100px"><div>[cE=false]</div><div contentEditable="true">[cE=true]</div></div>
        <div contentEditable="false" style="width: 100px; height: 100px"><div>[cE=false]</div><span contentEditable="true">[cE=true]</span></div>
        <table style="width: 100%">
          <tr>
            <td style="padding: 10px"><div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div></td>
            <td style="padding: 10px">aaaa</td>
          </tr>
          <tr>
            <td>bbbb</td>
            <td style="padding: 10px"><div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div></td>
          </tr>
          <tr>
            <td style="padding: 10px"><div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div></td>
            <td style="padding: 10px"><div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div></td>
          </tr>
          <tr>
            <td style="padding: 10px">aaa<div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div></td>
            <td style="padding: 10px"><div contentEditable="false" style="width: 100px; height: 100px">[cE=false]</div>bbb</td>
          </tr>
        </table>
        <div contentEditable="false" style="width: 100px; height: 100px">a<img src="https://www.google.com/logos/google.jpg" width="100">b</div>
      </textarea>

      <div class="tinymce">
        <p contentEditable="false">[cE=false]</p>
        <p>[cE=true]<span contentEditable="false">[cE=false]</span>abc<span contentEditable="false">[cE=false]</span><span contentEditable="false">[cE=false]</span><span contentEditable="false">[cE=false]</span><span contentEditable="false">[cE=false]</span></p>
        <p>Nam nisi elit, cursus in rhoncus sit amet, pulvinar laoreet leo. Nam sed lectus quam, ut sagittis tellus. Quisque dignissim mauris a augue rutrum tempor. Donec vitae purus nec massa vestibulum ornare sit ame<span contentEditable="false">[cE=false]</span>t id tellus. Nunc quam mauris, fermentum nec lacinia eget, sollicitudin nec ante. Aliquam molestie volutpat dapibus. Nunc interdum viverra sodales. Morbi laoreet pulvinar gravida. Quisque ut turpis sagittis nunc accumsan vehicula. Duis elementum congue ultrices. Cras faucibus feugiat arcu quis lacinia. In hac habitasse platea dictumst. Pellentesque fermentum magna sit amet tellus varius ullamcorper. Vestibulum at urna augue, eget varius neque. Fusce facilisis venenatis dapibus. Integer non sem at arcu euismod tempor nec sed nisl. Morbi ultricies, mauris ut ultricies adipiscing, felis odio condimentum massa, et luctus est nunc nec eros.</p>
        <p><span contentEditable="false">[cE=false<span contentEditable="true">[cE=true]</span>]</span></p>
        <p contentEditable="false">[cE=false]</p>
        <p contentEditable="false">[cE=false]</p>
        <div contentEditable="false" style="width: 100px; height: 100px"><div>[cE=false]</div><span contentEditable="true">[cE=true]</span></div>
        <div contentEditable="false" style="width: 100px; height: 100px"><div>[cE=false]</div><span contentEditable="true">[cE=true]</span></div>
      </div>
    </div>
    <script src="../../../../js/tinymce/tinymce.js"></script>
    <script src="../../../../scratch/demos/core/demo.js"></script>
    <script>demos.ContentEditableFalseDemo();</script>
  </body>
</html>
